<template>
  <h2>姓名：{{person.name}}</h2>
  <h2>年龄：{{person.age}}</h2>
  <h2>职位：{{person.job.j1.position}}</h2>
  <button @click="person.name+='~'">修改姓名</button>
  <button @click="person.age++">增长年龄</button>
  <button @click="person.job.j1.position+='~'">修改职位</button>
  <hr>
  <h2>姓名：{{name2}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>职位：{{position}}</h2>
  <button @click="name2+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="position+='~'">修改职位</button>
  <hr>
  <h2>姓名：{{name}}</h2>
  <h2>年龄：{{age}}</h2>
  <h2>职位：{{job.j1.position}}</h2>
  <button @click="name+='~'">修改姓名</button>
  <button @click="age++">增长年龄</button>
  <button @click="job.j1.position+='~'">修改职位</button>
</template>

<script>
import { reactive, toRef, toRefs } from 'vue'
export default {
  name: 'Demo',
  setup() {
    // 数据
    let person = reactive({
      name: '张三',
      age: 18,
      job: {
        j1: {
          position: '新生代农民工'
        }
      }
    })
    // 
    const name1 = person.name
    const name2 = toRef(person, 'name')
    console.log(name2)

    const x = toRefs(person)
    console.log(x)
    // 返回一个对象（常用）
    return {
      person,
      // name: person.name, name: ref(person.name) X 与person数据分家了
      name2,
      age: toRef(person, 'age'),
      position: toRef(person.job.j1, 'position'),
      ...toRefs(person)
    }
  }
}
</script>